<template>
  <div class="users_goods">
    <van-empty
      v-if="goods_type.length == 0"
      description="暂无菜品"
      class="empty"
    />

    <!-- 菜品分类展示 -->
    <van-sidebar
      v-model="active"
      @change="type_goods_show"
      class="user_goodstype_sidebar"
    >
      <van-sidebar-item
        v-for="(item, i) in goods_type"
        :key="i"
        :title="item.name"
        :badge="type_shopping_sum(i)"
        :badge-props="badge"
      />
    </van-sidebar>

    <!-- 菜品展示 -->
    <div class="user_goods_list">
      <div class="user_goods_show" v-for="(item, i) in goods_list" :key="i">
        <img
          :src="item.image"
          alt=""
          class="users_goods_image"
          @click="goods_desc_show(item)"
        />
        <div class="user_goods_desc">
          <div class="van-ellipsis">
            {{ item.name }}
          </div>
          <div class="user_goods_desc_data">
            <span style="color: #ee0a24">{{ item.price }}￥</span>
            <van-stepper
              v-model="shopping[active][i].sum"
              style="float: right"
              integer
              min="0"
              max="999"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 购物车及发起订单 -->
  <van-action-bar class="shopping_order">
    <van-action-bar-icon icon="chat-o" text="联系商家" @click="message_desc" />
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :badge="shopping_num"
      :badge-props="badge"
      @click="shopping_show = true"
    />
    合计：<span style="color: #ee0a24">{{ sum_price }}￥</span>
    <van-action-bar-button type="danger" text="立即购买" @click="order_goods" />
  </van-action-bar>

  <van-popup
    v-model:show="shopping_show"
    position="bottom"
    style="width: 95vw"
    round
    closeable
  >
    <div class="shopping">
      <div class="shopping_title">购物车</div>
      <div v-for="(type, i) in shopping" :key="i">
        <div v-for="(item, j) in type" :key="j">
          <div class="user_goods_show" v-if="item.sum != 0">
            <van-image
              fit="cover"
              position="center"
              :src="goods_type[i].goods_list[j].image"
              class="user_goods_image"
            >
              <template v-slot:error>加载失败</template>
            </van-image>
            <div class="user_goods_desc">
              <div class="van-ellipsis">
                {{ goods_type[i].goods_list[j].name }}
              </div>
              <div class="user_goods_desc_data">
                <span style="color: #ee0a24">{{ item.price }}￥</span>
                <van-stepper
                  v-model="item.sum"
                  style="float: right"
                  integer
                  min="0"
                  max="999"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <br /><br /><br />
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        @click="order_goods"
        class="pay_button"
      >
        {{ sum_price }}￥ 立即购买
      </van-button>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "show_goods",
  data() {
    return {
      badge: {
        "show-zero": false,
      },
      active: 0,
      shops_id: this.$route.query.shops_id,
      shops_name: this.$route.query.shops_name,
      goods_type: [],
      // 展示商品列表
      goods_list: [],

      // 商品详情
      goods: {},
      goods_show: false,

      // 购物车
      shopping: [],

      shopping_show: false,

      shopping_list: [],
    };
  },
  mounted() {
    this.submit();
  },
  computed: {
    shopping_num() {
      let sum = 0;
      for (let i in this.shopping) {
        for (let j in this.shopping[i]) {
          sum += this.shopping[i][j].sum;
        }
      }
      return sum;
    },
    sum_price() {
      let total_prices = 0;
      for (let i in this.shopping) {
        for (let j in this.shopping[i]) {
          if (this.shopping[i][j].sum != 0) {
            let price =
              this.shopping[i][j].sum * parseFloat(this.shopping[i][j].price);
            price = parseInt(price * 100);
            total_prices += price;
          }
        }
      }
      return total_prices / 100;
    },
  },
  methods: {
    goods_desc_show(item) {
      this.goods = item;
      this.goods_show = true;
    },
    // 购物车
    type_shopping_sum(index) {
      let sum = 0;
      for (let j in this.shopping[index]) {
        sum += this.shopping[index][j].sum;
      }
      return sum;
    },
    // 获取商品分类和商品
    submit: function () {
      this.myaxios(
        this.host + "users/show_goods/" + this.shops_id + "/",
        "get"
      ).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.goods_type = data.data;

          if (this.goods_type.length != 0) {
            this.goods_list = this.goods_type[0].goods_list;
          }

          for (let i in this.goods_type) {
            let type_shopping = [];
            this.shopping.push(type_shopping);
            for (let j in this.goods_type[i].goods_list) {
              // 每个商品
              let data = {
                id: this.goods_type[i].goods_list[j].id,
                price: this.goods_type[i].goods_list[j].price,
                sum: 0,
                sum_price: 0.0,
              };
              this.shopping[i].push(data);
            }
          }
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    // 展示商品
    type_goods_show(index) {
      // 获取分类下商品
      this.goods_list = this.goods_type[index].goods_list;
      // 获取分类下购物车
      // this.shopping_list = this.shopping[index].shopping_list;
    },
    order_goods() {
      this.shopping_show = false;
      let sum = 0;
      let sum_price = 0;
      this.shopping_list = [];
      let goods = [];
      for (let i in this.shopping) {
        for (let j in this.shopping[i]) {
          if (this.shopping[i][j].sum != 0) {
            goods.push(this.goods_type[i].goods_list[j]);

            let price =
              this.shopping[i][j].sum * parseFloat(this.shopping[i][j].price);
            price = parseInt(price * 100);
            this.shopping[i][j].sum_price = price / 100;
            this.shopping_list.push(this.shopping[i][j]);
            sum += this.shopping[i][j].sum;
            sum_price += price;
          }
        }
      }
      sum_price = sum_price / 100;

      if (this.shopping_list.length == 0 || sum_price == 0) {
        this.$toast.fail("请选择商品！");
        return;
      }
      let data = {
        shops_id: this.shops_id,
        goods: this.shopping_list,
        sum: sum,
        total_amount: sum_price,
      };
      this.$router.push({
        path: "/check_order",
        query: { order: JSON.stringify(data), goods: JSON.stringify(goods) },
      });
    },
    // 发起聊天
    message_desc() {
      this.myaxios(this.host + "chat/comm/" + this.shops_id, "post",{
        user_id:localStorage.getItem('id')
      }).then((data) => {
          console.log("建立聊天信息", data.data);
          if (data.errcode == 0) {
            let comm = data.data;
            let date = {
              chat_id: comm.id,
              chat_name: this.shops_name,
            };
            this.$router.push({ path: "/index/user_chat"});
          } else {
            this.$toast.fail(data.msg);
          }
        }
      );
    },
  },
};
</script>

<style>
.users_goods {
  height: calc(100vh - 28vw - 92px);
}
.users_goods_image {
  width: 100%;
  height: 100%;
  border-radius: 2vw;
}
.user_goodstype_sidebar {
  float: left;
  height: calc(100% - 50px);
  background-color: white;
  overflow-x: hidden;
  overflow-y: scroll;
}
.user_goods_list {
  float: left;
  width: calc(100% - 80px);
  height: calc(100% - 50px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.user_goods_show {
  padding: 3vw;
  min-height: 22vw;
  height: auto;
  overflow: hidden;
  background-color: white;
}
.user_goods_desc {
  float: left;
  padding-left: 3vw;
  width: calc(100% - 25vw);
}
.goods_desc_dialog {
  width: 70vw;
  height: calc(56% + 38px);
  position: absolute;
  left: 50vw;
  padding-top: 8px;
  text-align: center;
}

.shopping_order {
  width: 95vw;
}
.goods_desc_image {
  width: 100%;
  height: 100%;
  border-radius: 2vw;
}
.shopping {
  width: calc(100% - 12vw);
  max-height: 111vw;
  min-height: 50vw;
  padding: 7vw 3vw 3vw 3vw;
  overflow-x: hidden;
  overflow-y: scroll;
}
.shopping_title {
  width: 94vw;
  padding: 2vw 0px;
  font-size: 5vw;
  text-align: center;
  position: absolute;
  top: 0px;
  background-color: white;
}
.pay_button {
  position: fixed;
  bottom: 20px;
  width: 97vw;
  height: 10vw;
}
</style>